<template>
  <div class="login">
    <header>
      <span class="pre_span" @click="go()">&lt;</span>
      <span class="log_span">登录</span>
      <span class="reg_span" @click="register()">注册</span>
    </header>
    <div class="message_login">
      <div class="tel">
        <span>手机号:</span>
        <input type="text" />
      </div>
      <div class="pwd">
        <span>密码:</span>
        <input type="password" />
      </div>
      <div class="forget">
        <span>忘记密码</span>
      </div>
    </div>
    <div class="login_btn" @click="goIndex()">登录</div>
  </div>
</template>

<script>
export default {
  name: 'login',
  methods: {
    go () {
      this.$router.go(-1)
    },
    register () {
      this.$router.push('/register')
    },
    goIndex () {
      this.$router.push('/homepage')
    }
  }
}
</script>

<style lang="less" scoped>
header {
  height: 1.333333rem;
  line-height: 1.333333rem;
  width: 100%;
  background: #ff9900;
  text-align: center;
  font-size: 0.499867rem;
  color: #ffffff;
  .pre_span {
    position: absolute;
    left: 0.373333rem;
    font-size: 0.666667rem;
  }
  .reg_span {
    position: absolute;
    right: 0.373333rem;
  }
}
.message_login {
  height: 5rem;
  margin: 0 0.933333rem;
  margin-top: 3.16rem;
  .tel,
  .pwd {
    height: 1.773333rem;
    line-height: 1.773333rem;
    font-size: 0.4264rem;
    border-bottom: 1px solid #555555;
    span {
      display: block;
      width: 25%;
      float: left;
    }
    input {
      width: 75%;
      border: none;
      border-bottom: 1px solid #555555;
      float: right;
      height: 1.75rem;
      line-height: 1.76rem;
    }
  }
  .forget {
    width: 100%;
    line-height: 1.36rem;
    font-size: 0.3732rem;
    position: relative;
    span {
      position: absolute;
      right: 0;
      color: #666666;
    }
  }
}
.login_btn {
  margin: 0 0.933333rem;
  height: 1.333333rem;
  line-height: 1.333333rem;
  text-align: center;
  font-size: 0.3732rem;
  background: #ff9900;
  color: #ffffff;
  border-radius: 0.133333rem;
}
</style>>
